<template>
  <div>
    <van-nav-bar
      title="发布房源"
      left-arrow
      @click-left="$router.back()"
      class="title"
    />
    <form>
      <div class="message">房源信息</div>
      <van-cell title="小区名称" name="1" class="clr">
        <template #right-icon>
          <div class="XQ" @click="fn1">
            <div class="xiaoqu">{{ communityName || "请输入小区名称" }}</div>
            <span class="jiantou1">></span>
          </div>
        </template>
      </van-cell>
      <!-- --------------------------租金----------------------------------------- -->
      <van-cell title="租金" name="2" class="clr">
        <template #right-icon>
          <div class="ZJ">
            <input type="text" placeholder="请输入租金/月" v-model="zujin" />
            <div class="zujin">￥/月</div>
          </div>
        </template>
      </van-cell>
      <!-- ----------------------建筑面积-------------------------------------------------------- -->
      <van-cell title="建筑面积" name="3" class="clr">
        <template #right-icon>
          <div class="MJ">
            <input type="text" placeholder="请输入建筑面积" v-model="mianji" />
            <div class="mianji">m&sup2;</div>
          </div>
        </template>
      </van-cell>
      <!-- ----------------------------户型---------------------------------------------------------- -->
      <van-field
        readonly
        clickable
        label="户型"
        :value="value1"
        placeholder="请选择"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker1 = false"
          @confirm="onConfirm1"
        />
      </van-popup>
      <!-- ----------------------所在楼层-------------------------------- -->
      <van-field
        readonly
        clickable
        label="所在楼层"
        :value="value2"
        placeholder="请选择"
        @click="showPicker2 = true"
      />
      <van-popup v-model="showPicker2" round position="bottom">
        <van-picker
          show-toolbar
          :columns="column2"
          @cancel="showPicker2 = false"
          @confirm="onConfirm2"
        />
      </van-popup>
      <!-- -------------------------朝向------------------------------------------- -->
      <van-field
        readonly
        clickable
        label="朝向"
        :value="value3"
        placeholder="请选择"
        @click="showPicker3 = true"
      />
      <van-popup v-model="showPicker3" round position="bottom">
        <van-picker
          show-toolbar
          :columns="column3"
          @cancel="showPicker3 = false"
          @confirm="onConfirm3"
        />
      </van-popup>
      <!-- -------------------------房屋标题----------------------------------------------------- -->
      <div class="houseyitle">房屋标题</div>

      <div class="houseinput">
        <input
          v-model="biaoti"
          type="text"
          placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
        />
      </div>
      <!-- *********************房屋图像************************************* -->
      <van-cell-group border>
        <van-cell title="房屋图像" />
      </van-cell-group>
      <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      <!-- *******************************房屋配置****************************************** -->
      <div class="a">
        <div class="houseyitle">房屋配置</div>
        <van-grid :column-num="5" :border="false">
          <van-grid-item
            @click="sup(item, index)"
            v-for="(item, index) in list"
            :key="index"
          >
            <van-icon
              :class="{ 'van-cell__title': color.indexOf(index) !== -1 }"
              size="1.75rem"
              :name="icon[item]"
            />
            <span :class="{ 'van-cell__title': color.indexOf(index) !== -1 }">{{
              item
            }}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="kong"></div>
      <!-- ***********************房屋描述*********************************************** -->
      <div class="houseyitle">房屋描述</div>
      <van-divider />
      <div class="are">
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          class="area"
          placeholder="请输入房屋描述信息"
          v-model="fangwu"
        ></textarea>
      </div>
      <div class="kong"></div>
      <!-- ----------------------按钮-------------------- -->
      <div class="foot">
        <div class="left">
          <a href="">取消</a>
        </div>
        <div class="right">
          <button type="submit" @click.prevent="up">发布</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { getHome, housesParams, housesImg } from '@/api/other'
export default {
  // --------------------------------------------------------------------
  async created () {
    // 城市 value 是 community
    const { communityName } = this.$route.query
    this.communityName = communityName
    //  发布所需条件
    const { body } = await getHome()
    // console.log(body);
    this.body = body
    // 楼层
    this.column2 = body.floor.map((item) => item.label)
    // 朝向
    this.column3 = body.oriented.map((item) => item.label)

    // 户型
    this.columns = body.roomType.map((item) => item.label)
    //  房屋配置 名字
    this.list = body.supporting.map((item) => item.label)
  },

  data () {
    return {
      icon: {
        衣柜: 'gift-card-o',
        洗衣机: 'delete-o',
        空调: 'hotel-o',
        天然气: 'fire-o',
        冰箱: 'refund-o',
        暖气: 'bar-chart-o',
        电视: 'tv-o',
        热水器: 'cluster-o',
        宽带: 'desktop-o',
        床: 'printer'
      },
      zujin: '', // 租金
      mianji: '', // 面积
      biaoti: '', // 标题
      fangwu: '',
      communityName: '',
      community: '',
      activeNames: [0],
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      actions: '',
      value1: '',
      value2: '',
      value3: '',
      supporting: [],
      roomtype: [],
      floor: [],
      body: [],
      columns: [],
      column2: [],
      housesImg: [],
      column3: [],
      oriented: [],
      list: [],
      color: [],
      fileList: [], // 房屋图像
      housetype: {
        supporting: []
      } // 所有房屋类型
    }
  },
  methods: {
    // 图片上传
    async afterRead (file) {
      const formData = new FormData()
      formData.append('file', file.file)
      // console.log(formData);
      const res = await housesImg(formData)
      console.log(res.body)
      this.housesImg = res.body
    },
    sup (val, index) {
      if (this.housetype.supporting.indexOf(val) === -1) {
        this.housetype.supporting.push(val)
      } else {
        this.housetype.supporting.splice(
          this.housetype.supporting.indexOf(val),
          1
        )
      }
      if (this.color.indexOf(index) === -1) {
        this.color.push(index)
      } else {
        this.color.splice(this.color.indexOf(index), 1)
      }
    },
    up () {
      // console.log(this.community); //小区 获取 他的value
      // console.log(this.zujin); // price
      // console.log(this.biaoti); // title
      // console.log(this.mianji); //size
      // console.log(this.fangwu); // 描述   //description
      // console.log(this.value1); // 户型  roomtype   value
      // console.log(this.value2); // 楼层  floor      value
      // console.log(this.value3); // 朝向  oriented    value
      // console.log(this.housetype.supporting); //房屋配置 supporting
      this.floor = this.body.floor.find((item) => item.label === this.value2) // 楼层  floor      value
      // console.log(this.floor.value);
      this.roomtype = this.body.roomType.find(
        (item) => item.label === this.value1
      ) //  户型  roomtype   value
      // console.log(this.roomtype.value);
      this.oriented = this.body.oriented.find(
        (item) => item.label === this.value3
      ) // 朝向  oriented    value
      // console.log(this.oriented.value);
      if (this.fangwu && this.zujin && this.biaoti && this.mianji) {
        try {
          housesParams({
            title: this.biaoti,
            description: this.fangwu,
            houseImg: this.housesImg.join('|'),
            oriented: this.oriented.value,
            supporting: this.housetype.supporting.join('|'),
            price: this.zujin,
            roomType: this.roomtype.value,
            size: this.mianji,
            floor: this.floor.value,
            community: this.community
          })
          // console.log(res);
          this.communityName = ''
          this.$toast.success('发布成功')
          this.$router.push('/look')
        } catch (error) {
          // console.log(error);
          this.$toast.fail('数据异常')
        }
      } else {
        this.$toast.fail('请完整录入信息')
      }
    },
    fn1 () {
      this.$router.push('/searcharea')
    },
    fn () {},
    fn2 () {},
    fn3 () {},
    fn4 () {},
    onSelect () {},
    showPopup () {
      this.show = true
    },

    onConfirm1 (value) {
      this.value1 = value
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    onConfirm3 (value) {
      this.value3 = value
      this.showPicker3 = false
    },
    isshow () {
      this.showPopover = !this.showPopover
    }
  }
}
</script>

<style lang="less" scoped>
* .van-grid-item__content span {
  padding: 4.26667vw 0.13333vw;
}

.van-nav-bar {
  background-color: #21b97a;
}
.button {
  background-color: #21b97a;
}
.message {
  color: #21b97a;
  font-size: 15px;
  padding-left: 15px;
  padding-top: 10px;
}
.XQ {
  display: flex;
}
.xiaoqu {
  color: #888888;
  margin-right: 10px;
}
* {
  line-height: 8.4vw;
}
.jiantou1 {
  color: #c7c7cc;
  font-size: 20px;
}
.ZJ {
  display: flex;
  input {
    color: #000;
    font-size: 13px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 60%;
    padding: 2px 0;
    margin-left: 20px;
    padding-left: 30px;
    border: 0;
    background-color: transparent;
    line-height: 1;
    box-sizing: border-box;
  }
  .zujin {
    margin-left: 45px;
    color: #888888;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #bcbcbe;
  }
}
.MJ {
  display: flex;
  input {
    color: #000;
    font-size: 13px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 60%;
    padding: 2px 0;

    border: 0;
    background-color: transparent;
    line-height: 1;
    box-sizing: border-box;
  }
  .mianji {
    margin-left: 60px;
    color: #888888;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #bcbcbe;
  }
}
.houseyitle {
  color: #383839;
  font-size: 15px;
  padding-left: 15px;
  padding-top: 10px;
  font-weight: 500;
}

.houseinput {
  width: 100%;
  height: 40px;
  // background-color: pink;
  text-align: center;
  margin-top: 10px;
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #bcbcbe;
  }
}
.houseinput input {
  height: 35px;
  width: 100%;
  font-size: 13px;
  appearance: none;
  padding: 2px 0;
  border: 0;
  background-color: transparent;
  margin-left: 15px;
  // line-height: 1;
  box-sizing: border-box;
}
.kong {
  width: 100%;
  height: 20px;
  background-color: #f6f5f6;
}
.are {
  textarea::-webkit-input-placeholder {
    color: #bcbcbe;
  }
}
.area {
  width: 100%;
  border: 0px;
  margin-left: 10px;
  height: 150px;
  // background-color: pink;
}
.foot {
  display: flex;
  width: 100%;
  height: 60px;
  // background-color: pink;
  .left {
    width: 50%;
    height: 60px;
    line-height: 60px;
    //  background-color: blue;
    text-align: center;
    a {
      color: #2bbf97;
    }
  }
  .right {
    width: 50%;
    height: 60px;
    line-height: 60px;
    background-color: #21b97a;
    text-align: center;
    a {
      color: white;
    }
    button {
      background-color: #21b97a;
      border: none;
    }
  }
}
.van-cell-group.van-hairline--top-bottom {
  .van-cell__title {
    color: #333;
  }
  }
.clr.van-cell .van-cell__title {
      color: #333;

  }

.van-cell__title {
  color: #21b97a;
}
.van-cell {
  // display: flex;
  position: relative;
  .huxing {
    position: absolute;
    left: 85%;
  }
  .chaoxiang {
    position: absolute;
    left: 85%;
  }
  .louceng {
    position: absolute;
    left: 85%;
  }
}
.huxing,
.louceng,
.chaoxiang {
  color: #888888;
}
.title {
  color: #fff;
}
</style>
